<template>
  <div class="about p-8">
    <h1 class="text-3xl font-bold mb-6">About Page</h1>
    
    <!-- DaisyUI 按钮测试 -->
    <div class="flex gap-4 mb-8">
      <button class="btn btn-primary">主要按钮</button>
      <button class="btn btn-secondary">次要按钮</button>
      <button class="btn btn-accent">强调按钮</button>
      <button class="btn btn-outline">轮廓按钮</button>
    </div>

    <!-- DaisyUI 卡片测试 -->
    <div class="card w-96 bg-base-100 shadow-xl mb-8">
      <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="示例图片" /></figure>
      <div class="card-body">
        <h2 class="card-title">DaisyUI 卡片</h2>
        <p>这是一个使用 DaisyUI 样式的卡片组件。</p>
        <div class="card-actions justify-end">
          <button class="btn btn-primary">了解更多</button>
        </div>
      </div>
    </div>

    <!-- DaisyUI 警告框测试 -->
    <div class="alert alert-info mb-4">
      <span>这是一个信息提示框</span>
    </div>
    <div class="alert alert-success mb-4">
      <span>这是一个成功提示框</span>
    </div>
    <div class="alert alert-warning mb-4">
      <span>这是一个警告提示框</span>
    </div>
    <div class="alert alert-error">
      <span>这是一个错误提示框</span>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.about {
  max-width: 1200px;
  margin: 0 auto;
}
</style> 